<template>
  <div class="login-box">
    <div class="login-logo">
      <h1 class="mb-0 ml-2 text-3xl font-bold">{{ appTitle }}</h1>
    </div>
    <a-form layout="horizontal" :model="state.formInline" @finish="handleSubmit">
      <a-form-item name="username" :rules="state.rulesRef.username">
        <a-input v-model:value="state.formInline.username" size="large" placeholder="请输入账号">
          <template #prefix>
            <user-outlined type="user" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password" :rules="state.rulesRef.password">
        <a-input-password
          v-model:value="state.formInline.password"
          size="large"
          placeholder="请输入密码"
        >
          <template #prefix>
            <lock-outlined type="user" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { LockOutlined, UserOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import { appTitle, encryptByMd5 } from '@/utils/common';

  defineOptions({
    name: 'login',
  });
  const state = reactive({
    loading: false,
    formInline: {
      username: '',
      password: '',
    },
    rulesRef: {
      username: [
        {
          required: true,
          message: '请输入帐户名',
        },
      ],
      password: [{ required: true, message: '请输入密码！' }],
    },
  });

  const route = useRoute();
  const router = useRouter();

  const userStore = useUserStore();

  const handleSubmit = async (values) => {
    const { username, password } = state.formInline;
    state.loading = true;

    const res = await userStore.login({
      username,
      password: encryptByMd5(password),
    });
    if (res) {
      message.success('登录成功！');
      location.href = '/';
    }
    state.loading = false;
  };
</script>

<style lang="less" scoped>
  .login-box {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    background: url('@/assets/login.svg');
    background-size: 100%;
    flex-direction: column;
    align-items: center;

    .login-logo {
      display: flex;
      margin-bottom: 40px;
      align-items: center;

      .svg-icon {
        font-size: 48px;
      }
    }

    :deep(.ant-form) {
      width: 350px;

      .ant-col {
        width: 100%;
      }

      .ant-form-item-label {
        padding-right: 6px;
      }
    }
  }
</style>
